<%--
  Created by IntelliJ IDEA.
  User: august_Ld
  Date: 2022/5/17
  Time: 13:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<html>
<head>
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<%--    <!-- Bootstrap 的 CSS 文件 -->--%>
<%--    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"--%>
<%--          rel="stylesheet" integrity="sha384-rTTiRUKnSWaDu2FjhzWFl8/JuUZMlplyWE/djenb2LoKqkgLGfEGfSrL7XDLoB1M" crossorigin="anonymous">--%>


</head>
<body>

<div class="container">
    <h1 style="text-align: center;height: 300px;line-height: 300px">用户列表</h1>
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <table class="table table-hover">
                <thead>
                <tr>
                    <td>id</td>
                    <td>用户名</td>
                    <td>头像</td>
                    <td>部门</td>
                    <td>操作</td>
                </tr>
                </thead>
                <c:forEach items="${requestScope.users}" var="user">
                    <tr>
                        <td>${user.id}</td>
                        <td>${user.name}</td>
                        <td><img width="40px" src="${user.profile}"></td>
                        <td>${user.dept.name}</td>
                        <td>
                            <button type="button" class="delete btn btn-danger" data-id="${user.id}">删除</button>
                            <a type="button" href="user/update?id=${user.id}" class="update btn btn-primary" > 修改 </a>
                        </td>
                    </tr>
                </c:forEach>
            </table>

            <nav aria-label="Page navigation example">
                <ul class="pagination">
                    <li class="page-item">
                        <a class="page-link" href="user?currentPage=${requestScope.currentPage - 1 < 1 ? 1 : requestScope.currentPage - 1}&pageSize=${requestScope.pageSize}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <c:forEach begin="0" step="1" end="4" var="page">
                        <c:if test="${requestScope.currentPage - 2 + page gt 0 && requestScope.currentPage - 2 + page le requestScope.totalPage}">
                        <li class="page-item">
                            <a class="page-link"
                               href="user?currentPage=${requestScope.currentPage - 2 + page}&pageSize=${requestScope.pageSize}">
                                    ${requestScope.currentPage - 2 + page}</a></li>
                        </c:if>
                    </c:forEach>


                    <li class="page-item">
                        <a class="page-link" href="user?currentPage=${requestScope.currentPage + 1 > requestScope.totalPage ? requestScope.totalPage : requestScope.currentPage + 1}&pageSize=${requestScope.pageSize}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>


        </div>
        <div class="col-md-2"></div>
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script>
        $(".delete").click(function (){
            var flag = confirm("确定要删除么");
            if(flag) {
                let id = $(this).attr("data-id");
                $.get("user/delete?id=" + id, function () {
                    location.href = "user";
                })
            }
        })

</script>
</body>


</html>
